<template>
    <a-row>
        <a-col
            class="gutter-row"
            v-for="(item, index) in option.ColArray"
            :style="{
                display: ShowArray['Col_' + index] ? 'block' : 'none',
            }"
            :span="item"
        >
            <slot :name="'Col_' + index" :keyStr="'Col_' + index" @HideItem="HideItem"></slot>
        </a-col>
    </a-row>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
    option: {
        default: () => {
            return {
                ColArray: [24],
                RowGutter: 16,
            };
        },
    },
    Value: {},
});

var ShowArray = ref({});
for (let i = 0; i < props.option.ColArray.length; i++) {
    ShowArray.value["Col_" + i] = true;
}

const HideItem = (key, value) => {
    ShowArray.value[key] = value;
};
</script>
<style lang="less" scoped></style>
